﻿@page "/docs/components/switch"

<DocsPageTitle>
    Switch  component
</DocsPageTitle>

<DocsPageParagraph>
    Use <Code>Switch</Code> to toggle the state of a single setting on or off.
</DocsPageParagraph>

<DocsPageParagraph>
    Switches are the preferred way to adjust settings on mobile. The option that the switch controls,
    as well as the state it’s in, should be made clear from the corresponding inline label.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic" />
    <DocsPageSectionContent Outlined FullWidth>
        <BasicSwitchExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicSwitchExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Binding
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding" />
    <DocsPageSectionContent Outlined FullWidth>
        <SwitchWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SwitchWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual event binding" />
    <DocsPageSectionContent Outlined FullWidth>
        <SwitchWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SwitchWithEventExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="TValue" Type="generic">
        Data type of <Code>Checked</Code> value. Support types are <Code>bool</Code> and <Code>bool?</Code>.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Checked" Type="TValue" Default="default">
        Gets or sets the checked flag.
    </DocsAttributesItem>
    <DocsAttributesItem Name="CheckedChanged" Type="EventCallback<TValue>">
        Occurs when the check state is changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Color" Type="Color" Default="None">
        Component visual or contextual style variants.
    </DocsAttributesItem>
</DocsAttributes>